@charset "utf-8";
@import "common/reset";
$font-size: 20px;
@function r($px) {
    @return $px / $font-size * 1rem;
}
html,
body {
    height: 100%;
}
.web{
    section{
        .resource{
            width: 100%;
            position: relative;
            img {
                width: 100%;
            }
            .mask {
                position: absolute;
                bottom: r(4px);
                left: 0;
                opacity: 0;
                background: rgba(0,0,0,.5);
                width: 100%;
                height: r(104px);
                transition: all 1s;
                transform: translateY(100%);
                .kv_left{
                    margin-left: r(30px);
                    margin-top: r(23px);
                    h4{
                        font-size: r(26px);
                        color: white;
                    }
                    h5{
                        font-size: r(22px);
                        color: white;
                    }
                }
                .kv_right{
                    margin-top: r(60px);
                    margin-right: r(30px);
                    p{
                        display: inline-block;
                        font-size: r(18px);
                        color: white;
                        margin-right: r(22px);
                    }
                    i{
                        font-size: r(14px);
                        color: white;
                        span{
                            color: white;
                            font-size: r(16px);
                        }
                    }
                }
            }
            &:hover {
                .mask {
                    transform: translateY(0%);
                    opacity: 1;
                }
            }
        }
        ul{
            width: 95%;
            margin: 0 auto;
            li{
                border-bottom: 1px solid #cecece;
                padding-bottom: r(30px);
                margin-top: r(20px);
                .li_left{
                    width: 35%;
                    margin-right: 2%;
                    img{
                        width: 100%;
                    }
                }
                .li_right{
                    width: 60%;
                    a{
                        color: black;
                    }
                    h4{
                        font-size: r(26px);
                    }
                    p{
                        font-size: r(22px);
                        color: #c5c5c5;
                        margin-top: r(6px);
                    }
                    h5{
                        font-size: r(15px);
                        color: #939393;
                        margin-left: 40%;
                        display: inline-block;
                        margin-right: r(16px);
                        margin-top: r(15px);
                    }
                    i{
                        font-size: r(16px);
                        color: #939393;
                        span{
                            font-size: r(15px);
                        }
                    }
                }
                &:last-of-type{
                    border-bottom: none;
                }
            }
            
        }
    }
}
